/**
 * Created by rongyao on 2017/11/14.
 */
import React from 'react'
import {Link} from 'react-router'
import {Provider, connect} from 'react-redux'
import {fetchProduct,fetchCate,fetchIds} from '../../actions/counter'
import "./product.scss"

class Product extends React.Component{
	componentWillMount(){
		this.props.fetchCate(3);
		this.props.fetchProduct();
	}
	
	render(){
		function handlerPageLinkClick(e){
			var page = e.target.getAttribute('id');
			fetchProduct(page);
		}
		function search(e) {
			// console.log(111);
			var keyWords = $('#inp').val();
			// console.log(keyWords);
			fetchProduct(1,keyWords);
		}
		
		function searchCateProduct(e) {
			var index = e.target.getAttribute("data-num")-0;
			fetchIds(cateList[index]._id);
		}
		
		var {productList,cateList,fetchProduct,fetchIds} = this.props;
		// console.log(cateList);
		var cate = cateList.map(function (val, idx) {
			return <li data-num={idx} key={idx} onClick={searchCateProduct}>{val.title}</li>
		})
		
		if(productList.rows&&productList.rows.length>0){
			var listsLen = productList.rows.length;
			var pageList =[];
			var pageListContent;
			var showData = [];
			// console.log(newsList);
			if(productList.rows){
				var rowList=[];
				for (var i = 0; i < Math.ceil(listsLen/4); i++) {
					var colList = [];
					for (var j = 0; j < 4; j++) {
						var index= i*4+j;
						//加上记录数判断，如果下标索引值小于总的数组长度，则进行列表显示，否则不加入数据
						if(index<listsLen){
							var imgUrl = "http://localhost:3000/"+productList.rows[index].pic[0].filename;
							colList.push(
								<div key={index} className="col-lg-3 half">
									<img className="img-circle" src={imgUrl} alt="Generic placeholder image" style={{width:'40%'}}/>
									<h3>{productList.rows[index].name}</h3>
									<p>{productList.rows[index].describe}</p>
									<p><Link className="btn btn-default" to={`/productDetail/${index}`} role="button" data-num={index}>查看详情 &raquo;</Link></p>
								</div>
							)
						}
					};
					rowList.push(
						<div className="row" key={i}>{colList}</div>
					)
				};
				
				
				showData = rowList;
				
				// 列表分页处理
				var pageMaxSize = Math.ceil(productList.total/8);
				console.log(productList.total,pageMaxSize);
				for (var i = 1; i < pageMaxSize+1; i++) {
					pageList.push(
						<li key={i}><a href="javascript:void(0)" onClick={handlerPageLinkClick}  id={i}>{i}</a></li>
					)
				};
				pageListContent = (
					<nav style={{textAlign:'center'}}>
						<ul className="pagination">
							{pageList}
						</ul>
					</nav>
				)
			}
		}
		
		
		
		return (
			<div className="con container">
				<div className="row">
					<div className="cate col-md-2">
						<ul className="cateUl">
							{cate}
						</ul>
					</div>
					
					<div className="col-md-10">
						<div className="row">
							<div className="col-lg-12">
								<div className="input-group">
      <span className="input-group-btn">
        <button className="btn btn-default" type="button" onClick={search}>Go!</button>
      </span>
									<input id="inp" type="text" className="form-control" placeholder="Search for..."/>
								</div>
							</div>
						</div>
						<div>
							{rowList}
						</div>
					</div>
				</div>
				{pageListContent}
			</div>
		)
	}
}

const getValue = (state) => {
	return {
		value: state.count,
		newsList: state.newsList,
		cateList: state.cateList,
		productList: state.productList
	}
}
const productContext = connect(
	getValue,
	{fetchProduct,fetchCate,fetchIds}
)(Product)
module.exports=productContext;
